pubspec.yaml
dependencies:
flutter:
sdk: flutter
carousel_slider: ^4.0.0
main scrren
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
final List images = [
'https://via.placeholder.com/600x200/FF0000/FFFFFF',
'https://via.placeholder.com/600x200/00FF00/FFFFFF',
'https://via.placeholder.com/600x200/0000FF/FFFFFF',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Banner Slider'),
),
body: Center(
child: CarouselSlider(
options: CarouselOptions(
height: 200.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 0.8,
),
items: images.map((String imageUrl) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
color: Colors.grey,
),
child: Image.network(
imageUrl,
fit: BoxFit.cover,
),
);
},
);
}).toList(),
),
),
);
}
}
Positioning to top
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
final List images = [
'https://via.placeholder.com/600x200/FF0000/FFFFFF',
'https://via.placeholder.com/600x200/00FF00/FFFFFF',
'https://via.placeholder.com/600x200/0000FF/FFFFFF',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Banner Slider'),
),
body: Column (
children: [
CarouselSlider(
options: CarouselOptions(
height: 200.0,
enlargeCenterPage: true,
autoPlay: true,
aspectRatio: 16 / 9,
autoPlayCurve: Curves.fastOutSlowIn,
enableInfiniteScroll: true,
autoPlayAnimationDuration: Duration(milliseconds: 800),
viewportFraction: 0.8,
),
items: images.map((String imageUrl) {
return Builder(
builder: (BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
margin: EdgeInsets.symmetric(horizontal: 5.0),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black,
offset: Offset(2, 2),
spreadRadius: 2,
blurRadius: 5,
),
],
borderRadius: BorderRadius.all(Radius.circular(30)),
),
child: GestureDetector(
child: Image.network(
imageUrl,
fit: BoxFit.cover,
),
onTap: () {
print("Container was tapped");
}),
);
},
);
}).toList(),
),
]
),
);
}
}